<template>
  <div>
    <!-- <p>{{ message }}</p> -->
    <el-button type="primary" @click="logout">退出登录</el-button>
    <div style="margin: 10px 0">
      <el-button type="warning" plain @click="add">新增</el-button>
    </div>

    <!-- <div>
      <el-input
        style="width: 20%"
        v-model="id1"
        placeholder="请输入id"
      ></el-input>
      <el-button type="success" plain @click="search">搜索</el-button>
    </div> -->
    <el-table :data="orders" border stripe style="width: 100%">
      <el-table-column prop="id" label="ID" > </el-table-column>
      <el-table-column prop="amount" label="订单金额"> </el-table-column>
      <el-table-column prop="name" label="订单说明" > </el-table-column>
      <el-table-column prop="state" label="订单状态"> </el-table-column>
    </el-table>
    <div style="height: 100px"></div>

    <el-dialog title="新增订单" :visible.sync="dialogVisible" width="30%">
      <el-form :model="form" label-width="120px">
        <el-form-item label="订单说明">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="金额">
          <el-input v-model="form.amount"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-input v-model="form.state"></el-input>
        </el-form-item>
      </el-form>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Order",
  data() {
    return {
      orders: [],
      id: "",
      form: {},
      dialogVisible: false,
      message:"请登录以获取资源",
    };
  },
  created() {
    this.load();
    this.fetchResource();
  },
 
  methods: {
    // search() {
    //   const idNumber = parseInt(this.id);
    //   this.$axios
    //     .get(`http://localhost:8080/api/orders/${idNumber}`)
    //     .then((res) => {
    //       this.amount1 = res.data;
    //       console.log(res.data);
    //     })
    //     .catch(function (error) {
    //       console.log(error);
    //     });
    // },
    // searchstate() {
    //   const idNumber = parseInt(this.id);
    //   this.$axios
    //     .get(`http://localhost:8081/v1/orders/state/${idNumber}`)
    //     .then((res) => {
    //       this.state1 = res.data;

    //       console.log(res.data);

    //     })
    //     .catch(function (error) {
    //       console.log(error);
    //     });
    // },
    fetchResource() {
      this.$axios
        .get("http://localhost:8080/api/test/user", {
          headers: {
            Authorization: "Bearer " + localStorage.getItem("token"),
          }, // 携带 JWT
        })
        .then((res) => {
          // console.log(res.data);
          this.$set(this, 'message', res.data);
          // console.log(res);
        })
        .catch((error) => console.log(error));;
    },
    logout() {
        // 从 localStorage 中删除 jwt
      localStorage.removeItem('token');
      
      // 跳转到登录页面
      this.$router.push('/');
      },
    load() {
      this.$axios
        .get("http://localhost:8080/api/orders/", {
          headers: {
            Authorization: "Bearer " + localStorage.getItem("token"),
          }, // 携带 JWT
        })
        .then((res) => {
          this.orders = res.data;
          // console.log(res.data)
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    add() {
      this.dialogVisible = true;
      this.form = {};
    },
    save() {
      this.$axios
        .post("http://localhost:8080/api/orders/", this.form, {
          headers: {
            Authorization: "Bearer " + localStorage.getItem("token"),
          }, // 携带 JWT
        })
        .then((res) => {
          console.log(res);
          this.load(); //刷新表格数据
        });
      this.dialogVisible = false; //关闭弹窗
    },
  },
};
</script>

<style scoped>
</style>


